
<template>
  <!-- 油品收纳量情况分析 -->
  <div class="oil-storage-wrap">
    <div class="one-oil-wrap">
      <div class="dis-spa oil-all-wrap">
        <div class="dis-cen">
          <span>油站当前最大收纳量（L）</span>
          <span class="main-font">{{ maxDataComputed.need }}</span>
        </div>
        <div class="dis-cen">
          <span>油站现有库存总量（L）</span>
          <span class="main-font">{{ maxDataComputed.stock }}</span>
        </div>
      </div>
      <div v-for="(val,index) in oilInfo" :key="index" class="oil-info-sta">
        <div class="oil-top dis-spa">
          <div class="oil-max-wrap">
            <h5>{{ val.name }}</h5>
            <p>
              <span>当前最大收纳量（L）：</span>
              <span class="main-font">{{ val.residualCapacity }}</span>
            </p>
          </div>
          <div class="progress-wrap">
            <p>
              数据更新时间：
              <span>{{ val.oilTanks[0].updateDate }}</span>
            </p>
            <el-progress :text-inside="true" :stroke-width="22" :percentage="val.percentage" status="exception" />
            <p class="dis-spa">
              <span>已用：{{ val.percentage }}%</span>
              <span>收纳总量：{{ val.residualCapacity }}L</span>
            </p>
          </div>
        </div>
        <div class="oil-bottom">
          <div v-for="(tank,indext) in val.oilTanks" :key="indext" class="dis-cen oil-device">
            <img src="~@/assets/images/oil-device.png" alt>
            <div>
              <h5>{{ tank.deviceName }}</h5>
              <p class="current-re">
                <span>当前最大收纳量（L）：</span>
                <span class="main-font">{{ tank.residualCapacity }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="notice">
        说明：油品占比指的是剩余油品与油品收纳总量的占比（油品收纳总量根据该油品所属的油罐额定容量计算）
        如：该油站有92#汽油的油罐2个；每个油罐额定容量1000L；
        若目前92#汽油的存库容量为1000L，则该油品的占比为：1000/（1000+1000）
        即：油品库存容量/油罐油品额定容量的总和
      </div>
    </div>
  </div>
</template>

<script>
import { queryTankDetails } from '@/api/oilTank.js'
export default {
  name: 'OilStorage',
  data() {
    return {
      oilInfo: []
    }
  },
  computed: {
    // 油站当前最大收纳量
    maxDataComputed() {
      let need = 0; let stock = 0
      for (const i in this.oilInfo) {
        need += this.oilInfo[i].residualCapacity
        stock += this.oilInfo[i].existingCapacity
      }
      return {
        need, stock
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      queryTankDetails().then(res => {
        const all = res.data.countAll
        const oilAll = res.data.alls
        for (const i in all) {
          const oilTanks = []
          for (const oili in oilAll) {
            if (all[i].oilType == oilAll[oili].oilType) {
              oilTanks.push(oilAll[oili])
            }
          }
          all[i].percentage = (all[i].residualCapacity / all[i].ratedCapacity).toFixed(2) * 100
          all[i].oilTanks = oilTanks
        }
        console.log('数据')
        console.log(all)
        this.oilInfo = all
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/com.scss";
.oil-storage-wrap {
  margin-top: 5px;
  border: 1px solid $nodeBorderColor;
  .main-font {
    font-size: 22px;
    color: #ff7979;
  }
  h5 {
    margin: 0;
    font-size: 20px;
  }
}
.oil-all-wrap {
  & > div:first-of-type {
    border-right: 1px solid $nodeBorderColor;
  }
  & > div {
    flex: 1 1 0;
    flex-direction: column;
    padding: 10px 0;
    color: #fff;
    & > span {
      padding: 5px 0;
    }
  }
}
.oil-info-sta {
  padding: 20px 30px;
  border-top: 1px solid $nodeBorderColor;
  color: #fff;
  .oil-top {
    & > div {
      flex: 1 1 0;
    }
  }
}
.oil-bottom {
  padding-top: 20px;
  .oil-device {
    float: left;
    margin-right: 100px;
    padding: 15px;
    border: 1px solid $nodeBorderColor;
    border-radius: 5px;
  }
  img {
    margin-right: 15px;
  }
  .current-re {
    margin: 4px 0;
  }
  &::after{
    display: block;
    content: '';
    clear: both;
  }
}
.notice {
  padding: 15px 30px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 24px;
  letter-spacing: 1px;
  border-top: 1px solid $nodeBorderColor;
}
</style>
